<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 :title="title">
			<!-- <view class="navbar-right" slot="right" @click="addExcavator()">添加</view> -->
		</u-navbar>
		<view class="content">
			<view class="top-box">
				<u-row gutter="20">
					<u-col span="6">
						<view class="item-box">
							<image class="item-img" src="../../static/car.png" mode=""></image>
							<view class="item-num">{{getData.team}}</view>
							<view class="item-text">车队数量</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="item-box">
							<image class="item-img" src="../../static/machine.png" mode=""></image>
							<view class="item-num">{{getData.digger}}</view>
							<view class="item-text">挖掘机数量</view>
						</view>
					</u-col>
					<u-col span="12" >
						<view class="map" >
							<u-row gutter="16">
								<u-col span="1.5" @tap="gotoMap">
									<view class="map-icon"><image src="../../static/map.png" mode=""></image></view>
								</u-col>
								<u-col span="9" @tap="gotoMap"><view class="map-text">电子地图</view></u-col>
								<u-col span="1.5" @tap="gotoMap">
									<view class="map-icon"><image src="../../static/right.png" mode=""></image></view>
								</u-col>
							</u-row>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="springboard-wrap">
				<view class="springboard-box">
					<view class="title-box">常用功能</view>
					<view class="">
						<u-grid :col="3" :border="false">
							<u-grid-item @click="openPage('../dataReport/projectData/index')">
								<image class="item-img" src="../../static/statement.png" mode=""></image>
								<view class="grid-text">数据报表</view>
							</u-grid-item>
							<u-grid-item @click="openPage('./excavator/index')">
								<image class="item-img" src="../../static/Emanagement.png" mode=""></image>
								<view class="grid-text">挖机管理</view>
							</u-grid-item>
							<u-grid-item @click="openPage('./user/index')">
								<image class="item-img" src="../../static/user.png" mode=""></image>
								<view class="grid-text">用户管理</view>
							</u-grid-item>
							<u-grid-item @click="openPage('./motorcadeManagement/index')">
								<image class="item-img" src="../../static/Cmanagement.png" mode=""></image>
								<view class="grid-text">车队管理</view>
							</u-grid-item>
							<u-grid-item @click="openPage('./pointMangement/index')">
								<image class="item-img" src="../../static/Dmanagement.png" mode=""></image>
								<view class="grid-text">点位管理</view>
							</u-grid-item>
							<u-grid-item @click="openPage('./pathManagement/index')">
								<image class="item-img" src="../../static/Lmanagement.png" mode=""></image>
								<view class="grid-text">路径管理</view>
							</u-grid-item>
							<u-grid-item v-if="identity == 2" @click="openPage('../administrator/index')">
								<image class="item-img" src="../../static/user.png" mode=""></image>
								<view class="grid-text">管理员</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { readCarNum } from '@/api/project.js'
export default {
	data() {
		return {
			barbg: {
				background: '#5c92ff'
			},
			backText: {
				color: '#FFFFFF'
			},
			identity: '',
			getData: {},
			id: null,
			title: null

		};
	},
	components: {},
	
	onLoad(option) {
		// console.log(option.id);
		this.id = option.id
		this.title = option.name
		uni.setStorageSync('id',this.id)
		
		
		this.identity = uni.getStorageSync('identity')
	},
	onShow() {
		this.getListData()
	},
	methods: {
		openPage(path) {
			path = path + '?id=' + this.id
			uni.navigateTo({
				url: path
			});
		},
		gotoMap(){
			console.log("ok")
			uni.navigateTo({
				url: "./map/index"
			})
		},
		getListData(){
			readCarNum(this.id).then(res =>{
				console.log(res)
				if (res.code!==1){
					uni.showToast({
						title: '数据获取失败，请检查网络状态',
						icon:'none',
						duration: 2000
					})
				}
				this.getData = res.result.count
				console.log(this.getData)
				
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.navbar-right {
	padding: 0px 40rpx;
	color: #ffffff;
}
.top-box {
	padding: 20rpx;
	.item-box {
		height: 180rpx;
		background-color: #5c92ff;
		border-radius: 10rpx;
		padding: 20rpx;
		position: relative;
		.item-img {
			width: 80rpx;
			height: 74rpx;
			position: absolute;
			top: 60rpx;
			left: 30rpx;
		}
		.item-num {
			font-size: 48rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 1px;
			color: #ffffff;
			font-weight: bold;
			position: absolute;
			right: 30rpx;
			top: 40rpx;
		}
		.item-text {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 84px;
			letter-spacing: 0px;
			color: #fefeff;
			position: absolute;
			right: 30rpx;
			top: 50rpx;
		}
	}
	.map {
		height: 133rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 40rpx;
		.map-icon {
			height: 133rpx;
			width: 100%;
			position: relative;
			image {
				width: 42rpx;
				height: 41rpx;
				margin-left: 20rpx;
				position: absolute;
				top: 50%;
				margin-top: -20rpx;
			}
		}
		.map-text {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #2c3240;
			font-weight: bold;
			text-align: left;
		}
	}
}
.springboard-wrap {
	padding: 30rpx;
	padding-top: 0rpx;
}
.springboard-box {
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-top: 40rpx;
	.title-box {
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 70rpx;
		letter-spacing: 0rpx;
		color: #5c92ff;
		font-weight: bold;
		height: 110rpx;
		padding: 20rpx 60rpx;
		position: relative;
		border-bottom: 1px solid rgb(239, 239, 239);
	}
	.title-box::before {
		content: '';
		position: absolute;
		width: 8rpx;
		height: 40rpx;
		background-color: #007aff;
		left: 40rpx;
		top: 35rpx;
	}
	.item-img {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}
}
</style>
